import React from "react";
import { browserHistory } from "react-router";
import { Row, Col, Form, Icon, Input, Button, Checkbox, Table, Popover, Tag, DatePicker } from "antd";
const FormItem = Form.Item,
    CheckboxGroup = Checkbox.Group,
    RangePicker = DatePicker.RangePicker;

import TableFilter from "../pub/TableFilter.jsx";

class Index extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            keywords: "",
            pageNo: 1,
            pageSize: 20,
            total: 1000,
            loading: false
        };

        this.doQuery = this.doQuery.bind(this);
    }

    componentWillMount() {
        const {setPage} = this.props;
        setPage([{
            title: "车联网平台首页",
            url: "/dashboard"
        }], "车型管理")
    }

    doQuery() {
        const {pageNo, pageSize, filter} = this.state;
        console.log("doQuery", pageNo, pageSize, filter);
    }

    render() {
        const {pageNo, pageSize, total, loading} = this.state;

        const columns = [
            {
                title: '编号',
                render: (text, record, index) => pageSize * (pageNo - 1) + index + 1,
                width: 80
            }, {
                title: '型号',
                dataIndex: 'name',
                key: 'name',
                width: 240
            }, {
                title: '型号编码',
                dataIndex: 'code',
                key: 'code',
                width: 240
            }, {
                title: '整车厂家',
                dataIndex: 'factory',
                key: 'factory'
            }, {
                title: '车辆类型',
                dataIndex: 'type',
                key: 'type',
                width: 120
            }, {
                title: '座位数',
                dataIndex: 'seatNum',
                key: 'seatNum',
                width: 120
            }, {
                title: '操作',
                key: 'opr',
                render: (text, record, index) => <div className="ta-c"><Button type="primary" size="small" onClick={ () => browserHistory.push("/model/" + record.id) }>编辑</Button></div>,
                width: 120
            }];

        const pagination = {
            total,
            pageSize,
            size: "small",
            showQuickJumper: true,
            showTotal: (total, range) => `${range[0]}-${range[1]}条，共${total}条`,
            onChange: (current) => {
                this.setState({
                    pageNo: current
                })
            },
        };

        return <div>
                   <Form inline className="search-from">
                       <FormItem className="keywords">
                           <Input id="searchBtn" addonAfter={ <Icon type="search" onClick={ this.doQuery } /> } placeholder="关键字搜索(车型名称)" />
                       </FormItem>
                       <FormItem className="top-opr">
                           <Button type="primary" size="default" icon="plus-circle-o" onClick={ () => browserHistory.push("/model/new") }>新增车型</Button>
                       </FormItem>
                   </Form>
                   <Table loading={ loading } className="gray-table mt20" rowKey="id" columns={ columns } dataSource={ data } pagination={ pagination } />
               </div>;
    }

}

const data = [];

for (let i = 0; i < 20; i++) {
    data.push({
        id: "a22sdf52s5d2221542d24" + i,
        name: "黄海瑞图e2016",
        code: "HUANGHAI-e2016",
        factory: "黄海汽车有限公司",
        type: "厢式货车"
    });
}

export default Index;